<template>
    <main class="editor shadow">
      <div id="editor"></div>
      <section class="actions">
        <a-button type="primary" @click="showModal">发布</a-button>
        <a-button type="danger">清空</a-button>
      </section>
      <b-modal ref="modal" @submit="submit" />
    </main>
  </template>

<script>
    import xss from "xss";
    import {
        onMounted,
        ref
    } from "vue";
    import {
        useLocalStorage
    } from "@u/local-storage.js";
    import {
        useEditor
    } from "@u/editor.js";
    import {
        useInfoNotice
    } from "@u/notice.js";
    import {
        useDebounce
    } from "@u/fangdou.js";
    import BModal from "@b/modal.vue";

    export default {
        components: {
            BModal,
        },
        setup() {
            const editor = useEditor();
            editor.config.zIndex = 0;
            editor.config.height = 600;

            const [draft] = useLocalStorage("draft");

            onMounted(() => editor.txt.html(draft.value));

            editor.config.onchange = useDebounce((newHtml) => {
                draft.value = xss(newHtml);
                useInfoNotice({
                    message: "草稿",
                    description: "已缓存在本地",
                });
            }, 3000);

            const modal = ref(null);
            const showModal = () => modal.value.setVisible(true);

            const submit = (record) => {
                console.log(record);
                // modal.value.setVisible(false);
                // modal.value.okButtonProps.loading = true;
            };

            return {
                modal,
                showModal,
                submit,
            };
        },
    };
</script>

<style scoped>
    .editor {
        margin: 30px 10px;
        background-color: #eceff1;
        padding: 10px;
        border-radius: 4px;
    }
    
    .actions {
        padding: 8px;
        text-align: center;
    }
    
    .actions>* {
        margin: 10px;
    }
</style>